<template>
  <div class="workbenchIndex">
    <div class="mean">
      <div class="logo">
        <img src="@/assets/icon/favicon.png" alt>
      </div>
      <div class="tabs">
        <router-link v-for="(item,index) in mean" :key="index" :to="item.path">
            <div :class="'tabBox '+(index==hover?'hover':'')" @click="changeHover(index)">
              <i :class="item.logo"/>
              <span>{{item.name}}</span>
            </div>
        </router-link>
      </div>
    </div>
    <div class="window">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mean: [
        {
          name: "首页",
          logo: "fa fa-home",
          path: "/home"
        },
        {
          name: "客户",
          logo: "fa fa-user",
          path: "/customer"
        },
        {
          name: "项目",
          logo: "fa fa-suitcase",
          path: "/business"
        },
        {
          name: "人才",
          logo: "fa fa-inbox",
          path: "/product"
        },
        {
          name: "合同",
          logo: "fa fa-file-text",
          path: "/contract"
        },
        {
          name: "财务",
          logo: "fa fa-credit-card",
          path: "/invoice"
        },
        {
          name: "报表",
          logo: "fa fa-area-chart",
          path: "/hleads"
        },
        {
          name: "职级",
          logo: "fa fa-leaf",
          path: "/integral"
        },
        {
          name: "背调",
          logo: "fa fa-credit-card",
          path: "/background"
        },
        {
          name: "回款",
          logo: "fa fa-credit-card",
          path: "/return"
        },
        {
          name: "分析模块",
          logo: "fa fa-credit-card",
          path: "/phone"
        },
        {
          name: "系统",
          logo: "fa fa-cog",
          path: "/setting"
        }
      ],
      hover: 0
    };
  },
  methods: {
    changeHover(index) {
      this.hover = index;
    }
  },
  created(){
    switch(this.$route.name){
      case '首页':
      this.hover = 0;
      break;
      case '客户':
      this.hover = 1;
      break;
      case '项目':
      this.hover = 2;
      break;
      case '人才':
      this.hover = 3;
      break;
      case '合同':
      this.hover = 4;
      break;
      case '财务':
      this.hover = 5;
      break;
      case '报表':
      this.hover = 6;
      break;
      case '职级':
      this.hover = 7;
      break;
      case '背调':
      this.hover = 8;
      break;
      case '回款':
      this.hover = 9;
      break;
      case '分析模块':
      this.hover = 10;
      break;
      case '系统':
      this.hover = 11;
      break;
    }
  }
};
</script>

<style lang='scss'>
.workbenchIndex {
  width: 100vw;
  height: 100vh;
  .mean {
    width: 100px;
    height: 100%;
    background: #2f4050;
    position: absolute;
    left: 0;
    top: 0;
    .logo {
      height: 38px;
      padding: 13px 0;
      text-align: center;
      background: #263a4a;
      img {
        width: 38px;
        height: 38px;
      }
    }
    .tabs {
      .tabBox {
        padding: 14px 20px;
        font-size: 14px;
        width: 100px;
        box-sizing: border-box;
        text-align: center;
        line-height: 25px;
        i,
        span {
          color: #a7b1c2;
          font-weight: 600;
        }
      }
      .hover {
        border-left: 3px solid #19aa8d;
        background: #263a4a;
        i,
        span {
          color: #fff;
        }
      }
      .tabBox:hover {
          background: #233645;
          i,
          span {
            color: #777;
          }
        }
    }
  }
  .window{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100px;
    right: 0;
    overflow: scroll;
    background: #e6e9f0;
  }
}
</style>
